<template>
	<div class="tuanduirenzheng">
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>团队认证</el-breadcrumb-item>
				<!-- <el-breadcrumb-item>成员管理</el-breadcrumb-item> -->
			</el-breadcrumb>
			<!-- <breadcrumb></breadcrumb> -->
			<el-button size="mini" type="primary" style="float: right;margin-top: -20px;" @click="$router.push('/myteam/teaminfo/teamdata')" v-has="'修改认证'">修改认证</el-button>
		</div>
		<div class="pageContent">
			<div class="contentHeader">团队基本信息</div>
			<div class="basicInformation flex" style="justify-content: space-between;">
				<div v-if="pageData.company">
					<el-form :model="pageData" class="demo-form-inline" label-width="10rem">
						<el-form-item label="团队名称：">
							<el-input v-model="pageData.company.companyName" disabled class="ainput" placeholder="团队名称"></el-input>
						</el-form-item>
					</el-form>
					<el-form :inline="true" :model="pageData" class="demo-form-inline" label-width="10rem">
						<el-form-item label="平台编码：">
							<el-input v-model="pageData.company.platformNumber" disabled placeholder="平台编码"></el-input>
						</el-form-item>
						<el-form-item label="团队类型：" class="ael-form-item">
							<el-input v-model="pageData.company.companyNature" disabled placeholder="团队类型"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<el-image v-if="pageData.company" :src="pageData.company.companyLogo?pageData.company.companyLogo:$globalData.defaultImg" fit="cover" class="renzhengImgs"></el-image>
			</div>
			<div class="contentHeader">团队负责人情况</div>
			<div class="basicInformation flex" style="justify-content: space-between;">
				<div v-if="pageData.userInfo">
					<el-form :inline="true" :model="pageData" class="demo-form-inline" label-width="10rem">
						<el-form-item label="管理员姓名：">
							<el-input v-model="pageData.userInfo.name" disabled placeholder="管理员姓名"></el-input>
						</el-form-item>
						<el-form-item label="联系电话：" class="ael-form-item">
							<el-input v-model="pageData.userInfo.phone" disabled placeholder="联系电话"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<!-- <el-image :src="$globalData.defaultImg" fit="cover" class="renzhengImgs"></el-image> -->
			</div>
			<div class="contentHeader">团队认证情况</div>
			<el-form v-if="pageData.company" :model="pageData" class="demo-form-inline" label-width="10rem">
				<el-form-item label="组织代码：">
					<el-input v-model="pageData.company.organizationCode" disabled class="ainput" placeholder="组织代码"></el-input>
				</el-form-item>
			</el-form>
			<div class="basicInformation flex" style="padding-left: 10rem;margin-bottom: 0px;">
				<div class="rankPhotos flex" v-if="pageData.company">
					<div class="rankPhotosListBox" v-for="item in pageData.company.companyLicenseEntityList" :key="item.id">
						<img :src="item.licensePicture?item.licensePicture:$globalData.defaultImg"  alt="" class="InformationImgs">
						<!-- <el-image :src="$globalData.defaultImg" fit="cover" class="InformationImgs"></el-image> -->
					</div>
					<!-- <el-upload disabled class="InformationUpload rankPhotosListBox" ref="InformationUpload" action="" :show-file-list="false">
						<div class="materials">
							<i class="el-icon-plus avatar-uploader-icon"></i>
							<p>上传职级证明材料</p>
						</div>
					</el-upload> -->
				</div>
			</div>
			<!-- <div class="InformationUploadTip">为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div> -->
		</div>
	</div>
</template>

<script>
	import breadcrumb from '../components/breadcrumb.vue'
	export default {
		components:{
			breadcrumb
		},
		data() {
			return {
				pageData: {},
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: ''
			}
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 22)
			let userInfo = this.$store.state.user.userInfo
			this.userId = userInfo.id
			this.companyId = this.$store.state.company.selectCompanyId?this.$store.state.company.selectCompanyId:this.$store.state.company.companyId
			this.getCompanyInformation()
		},
		methods:{
			getCompanyInformation(){
				this.$request.postForm(this.$api.getCompanyCertificationDetail,{
					userId: this.userId,
					companyId: this.companyId
				}).then(res=>{
					if(res.code == 200){
						this.pageData = res.data
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb{
		padding: 20px;
		border-bottom: 1px solid #DCDCDC;
	}
	.pageContent {
		padding: 20px;
	}
	
	/* .contentHeader {
		color: #333333;
		font-size: 16px;
		position: relative;
		width: 150px;
		text-align: right;
		margin-bottom: 20px;
	}
	
	.contentHeader::after {
		content: '';
		width: 690px;
		top: 50%;
		border-bottom: 1px dotted #DCDCDC;
		position: absolute;
		left: 170px;
	} */
	.contentHeader{
			width: 100%;
			padding: 10px 20px;
			color: #333333;
			font-size: 16px;
			background: #F3F3F3;
			margin-bottom: 20px;
		}
	.teamType {
		width: 80%;
		margin-left: 10%;
		justify-content: space-evenly;
		margin-bottom: 60px;
	}
	
	.typeList {
		width: 100px;
		height: 110px;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		text-align: center;
		padding: 20px;
		cursor: pointer;
	}
	
	.typeListImage {
		width: 50px;
		height: 50px;
		border-radius: 100%;
	}
	
	.typeList:hover {
		border-color: #23B14D;
	}
	
	.ainput {
		width: 478px;
	}
	
	.aainput {
		width: 270px;
		margin-left: 10px;
	}
	
	.ael-form-item>>>.el-form-item__label {
		width: 100px !important;
	}
	
	.InformationUploadTip {
		padding-left: 17.2rem;
		color: #AAAAAA;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 60px;
	}
	
	.rankPhotos {
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
	.rankPhotosListBox {
		width: 210px;
		height: 138px;
		border: 1px solid #DCDCDC;
		position: relative;
		text-align: center;
		margin-right: 15px;
		margin-bottom: 15px;
	}
	.InformationImgs{
		width: 210px;
		height: 138px;
		display: block;
	}
	
	.deleteRankPhoto {
		color: darkred;
		position: absolute;
		top: -10px;
		right: -10px;
		z-index: 5;
		font-size: 24px;
		cursor: pointer;
		background: #fff;
		border-radius: 100%;
	}
	
	.InformationUpload {
		margin-right: 0;
	
	}
	
	.materials {
		width: 210px;
		height: 138px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		border: 1px solid #DCDCDC;
	}
	
	.materials .avatar-uploader-icon {
		width: 100%;
		height: 50px;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}
	
	.materials p {
		width: 100%;
		color: #AAAAAA;
		font-size: 12px;
	}
	
	.basicInformation {
		margin-bottom: 60px;
	}
	.renzhengImgs{
		width: 100px;
		height: 100px;
		/* margin-right: 75px; */
		border-radius: 3px;
		/* float: right; */
	}
</style>
